<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <el-form :inline="true" class="demo-form-inline filter">
      <div>
      <el-form-item label="报修日期">
         <el-date-picker
          v-model="alarmdate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"/>
      </el-form-item>
      <el-form-item label="报修单号">
        <el-input
          v-model="listQuery.fbillno"
          clearable
          class="filter-item"
          placeholder="请输入报修单号"
        />
      </el-form-item>
      <el-form-item label="处理状态">
        <el-select
        v-model="listQuery.fbillstate"
        class="filter-item"
        clearable
        placeholder="请选择处理状态"
      >
        <el-option
          v-for="item in fbillstateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      </el-form-item>
      <span v-if="this.$store.state.user.fsiteLevel==3" >
          <el-form-item label="客户名称">
          <el-select disabled v-model="listQuery.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
                  <el-option
                    v-for="item in getListfsiteNo"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"/>
                </el-select>
        </el-form-item>
      </span>
      <span v-else>
        <el-form-item label="客户名称">
            <el-select @change="changeFsiteNo" v-model="listQuery.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
                    <el-option
                      v-for="item in getListfsiteNo"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"/>
                  </el-select>
          </el-form-item>
        </span>
      </div>
      <div>
      <span v-if="this.$store.state.user.fsiteLevel==3" >
          <el-form-item class="searchOne" label="报修人员">
          <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select style="display: inline-block" clearable filterable v-model="listQuery.freportuser" class="filter-item" placeholder="请选择报修人员">
                <el-option
                v-for="item in getListuser"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
                <i class="el-icon-search selectI" @click="searchDialoguse('search')"/>
              </div>
          </el-form-item>
          <el-form-item style="margin-left:-13px" label="存放地点">
            <div style="display:flex;justify-content:flex-start;align-items:center">
                    <el-select style="display: inline-block" clearable filterable v-model="listQuery.fpointNo" class="filter-item" placeholder="请选择存放地点">
                    <el-option
                    v-for="item in getListfpointNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
                  </el-select>
                    <i class="el-icon-search selectI" @click="searchDialoglab('search')"/>
                  </div>
          </el-form-item>
          <el-form-item style="margin-left:-13px" label="维修人员">
          <div style="display:flex;justify-content:flex-start;align-items:center">
                    <el-select style="display: inline-block" clearable filterable v-model="listQuery.frepairuser" class="filter-item" placeholder="请选择维修人员">
                    <el-option
                    v-for="item in getListuser"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
                  </el-select>
                    <i class="el-icon-search selectI" @click="searchDialoguse('searchre')"/>
                  </div>
          </el-form-item>
      </span>
      <span v-else>
          <el-form-item label="报修人员">
          <div style="display:flex;justify-content:flex-start;align-items:center">
                    <el-select style="display: inline-block" clearable filterable v-model="listQuery.freportuser" class="filter-item" placeholder="请选择报修人员">
                    <el-option
                    v-for="item in getListuserArea"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
                  </el-select>
                    <i class="el-icon-search selectI" @click="searchDialoguse('search')"/>
                  </div>
          </el-form-item>
          <el-form-item style="margin-left:-13px" label="存放地点">
            <div style="display:flex;justify-content:flex-start;align-items:center">
                    <el-select style="display: inline-block" clearable filterable v-model="listQuery.fpointNo" class="filter-item" placeholder="请选择存放地点">
                    <el-option
                    v-for="item in getListfpointNoArea"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
                  </el-select>
                    <i class="el-icon-search selectI" @click="searchDialoglab('search')"/>
                  </div>
          </el-form-item>
          <el-form-item style="margin-left:-13px" label="维修人员">
          <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select style="display: inline-block" clearable filterable v-model="listQuery.frepairuser" class="filter-item" placeholder="请选择维修人员">
                <el-option
                v-for="item in getListuserArea"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
                <i class="el-icon-search selectI" @click="searchDialoguse('searchre')"/>
              </div>
          </el-form-item>
      </span>
      <el-form-item>
         <!-- v-permission="['fault:repairHead:read']" -->
      <el-button
      round size="medium"
        class="filter-item"
        :style="{background:buttonColor.lookup,color:buttonColor.color}"
        @click="handleFilter"
      >查找</el-button
      >
      <!-- v-permission="['fault:repairHead:create']" -->
      <el-button
      round size="medium"
        class="filter-item"
       :style="{background:buttonColor.add,color:buttonColor.color}"
        @click="handleCreate"
      >添加</el-button
      >
      </el-form-item>
      </div>
      </el-form>

    <!-- 查询结果 -->
    <el-table
      :height="buttonColor.clientHeightTwo"
      v-loading="listLoading"
      :data="list"
      stripe
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      :header-cell-style="tableColor"
    >
       <el-table-column align="center" label="操作" class-name="small-padding" :width="buttonColor.operationThree">
        <template slot-scope="scope">
          <div class="operationButton">
            <div :style="{color:buttonColor.edit,cursor:'pointer'}" @click="handleUpdate(scope.row)">
            <img src="../../../public/images/edit.png" />
            编辑
          </div>
          <div :style="{color:buttonColor.delete,cursor:'pointer'}" @click="handleDelete(scope.row)">
            <img src="../../../public/images/del.png" />
            删除
          </div>
            <!-- <div :style="{color:buttonColor.examine,cursor:'pointer'}" @click="audit(scope.row)">
            <img src="../../../public/images/examine.png" />
            确认
          </div> -->
           <div :style="{color:buttonColor.print,cursor:'pointer'}">
            <img src="../../../public/images/print.png" />
            打印
          </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        :index="indexMethod"
        :width="buttonColor.line"
        align="center"
        label="序"
        type="index"
      />
      <el-table-column align="left" label="报修单号" prop="fbillno" :width="buttonColor.billno"/>
      <el-table-column v-if="this.$store.state.user.fsiteLevel!=3" :formatter="formatfsiteNo" :width="buttonColor.user" align="left" label="客户名称" prop="fsiteNo" />
      <el-table-column width="120" :formatter="formatfpointNo" align="left" label="存放地点" prop="fpointNo" />
      <el-table-column :width="buttonColor.user" :formatter="formatfreportuser" align="left" label="报修人员" prop="freportuser" />
      <el-table-column
        :width="buttonColor.date"
        :formatter="datetimeFormat"
        align="left"
        label="报修日期"
        prop="freportdate"
      />
      <el-table-column
        :width="buttonColor.billno"
        align="left"
        label="固定资产码"
        prop="fequipmentbarcode"
      />
      <el-table-column :width="buttonColor.user" align="left" label="设备名称" prop="fequipmenttag" />
      <el-table-column width="140" align="left" label="故障描述" prop="ferrormemo" />
      <el-table-column :formatter="formatferrorlevel" align="left" label="紧急程度" prop="ferrorlevel" />
      <el-table-column :width="buttonColor.user" :formatter="formatfrepairuser" align="left" label="维修人员" prop="frepairuser" />
      <el-table-column
        :width="buttonColor.date"
        :formatter="datetimeFormat"
        align="left"
        label="接单日期"
        prop="frecdate"
      />
      <el-table-column :width="buttonColor.state" align="left" label="处理状态" prop="fbillstate">
        <template slot-scope="scope">
            <span
            :style="{color:buttonColor.confirm}"
            v-if="scope.row.fbillstate === 2"
            >{{ scope.row.fbillstate | siteTypeFilter }}</span
          >
          <span
            :style="{color:buttonColor.itemisconfirmed}"
            v-if="scope.row.fbillstate === 3"
            >{{ scope.row.fbillstate | siteTypeFilter }}</span
          >
          <span :style="{color:buttonColor.itemconfirmed}" v-else-if="scope.row.fbillstate === 4">{{
            scope.row.fbillstate | siteTypeFilter
          }}</span>
          <span :style="{color:buttonColor.iteminvalid}" v-else-if="scope.row.fbillstate === 5">{{
            scope.row.fbillstate | siteTypeFilter
          }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <!-- 添加或修改对话框 -->
    <el-dialog
      width="98%"
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
    <template slot="title">
      <div :style="titleColor">{{textMap[dialogStatus]}}</div>
    </template>
      <el-form
      v-if="dialogStatus==='create'"
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="90px"
      >

       <el-row>
          <el-col :span="6">
        <el-form-item class="required" label="报修单号" prop="fbillno">
          <el-input :disabled='true' v-model="dataForm.fbillno" />
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="required" label="报修日期" prop="freportdate">
          <el-date-picker disabled v-model="dataForm.freportdate" type="date" />
        </el-form-item>
          </el-col>
         <el-col :span="6">
           <el-form-item class="required" label="处理状态" prop="fbillstate">
              <el-select
              disabled
              v-model="dataForm.fbillstate"
              class="filter-item"
              clearable
              placeholder="请选择处理状态"
            >
              <el-option
                v-for="item in fbillstateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </el-form-item>
         </el-col>
             <el-col :span="6">
             <el-form-item class="required" v-if="this.$store.state.user.fsiteLevel==3" label="报修人员" prop="freportuser">
          <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select style="display: inline-block" clearable filterable v-model="dataForm.freportuser" class="filter-item" placeholder="请选择报修人员">
                <el-option
                v-for="item in getListuser"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
                <i class="el-icon-search selectI" @click="searchDialoguse('add')"/>
              </div>
        </el-form-item>
        <el-form-item class="required" v-else label="报修人员" prop="freportuser">
          <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select style="display: inline-block" clearable filterable v-model="dataForm.freportuser" class="filter-item" placeholder="请选择报修人员">
                <el-option
                v-for="item in getListuserAreaAdd"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
                <i class="el-icon-search selectI" @click="searchDialoguse('add')"/>
              </div>
        </el-form-item>
         </el-col>
        </el-row>

        <el-row>
              <el-col :span="6">
            <el-form-item class="required" label="固定资产码" prop="fequipmentbarcode">
          <div style="display:flex;justify-content:flex-start;align-items:center">
            <el-input v-model="dataForm.fequipmentbarcode" style="display: inline-block" />
            <i class="el-icon-search selectI" @click="searchDialogcode"/>
          </div>
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称" prop="fequipmenttag">
          <el-input disabled v-model="dataForm.fequipmenttag" />
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
            class="required"
              v-if="this.$store.state.user.fsiteLevel==3"
              label="客户名称"
              prop="fsiteNo"

            >
              <el-select disabled v-model="dataForm.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item
            class="required"
              label="客户名称"
              prop="fsiteNo"
              v-else
            >
              <el-select @change="changeFsiteNoAdd" v-model="dataForm.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item class="required" v-if="this.$store.state.user.fsiteLevel==3" label="存放地点" prop="fpointNo">
        <div style="display:flex;justify-content:flex-start;align-items:center">
                 <el-select @change="changeFpointNo" style="display: inline-block" clearable filterable v-model="dataForm.fpointNo" class="filter-item" placeholder="请选择存放地点">
                <el-option
                v-for="item in getListfpointNo"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
                <i class="el-icon-search selectI" @click="searchDialoglab('add')"/>
              </div>
        </el-form-item>
        <el-form-item class="required" v-else label="存放地点" prop="fpointNo">
        <div style="display:flex;justify-content:flex-start;align-items:center">
                 <el-select @change="changeFpointNo" style="display: inline-block" clearable filterable v-model="dataForm.fpointNo" class="filter-item" placeholder="请选择存放地点">
                <el-option
                v-for="item in getListfpointNoAreaAdd"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
                <i class="el-icon-search selectI" @click="searchDialoglab('add')"/>
              </div>
        </el-form-item>
          </el-col>

        </el-row>

        <el-row>
         <el-col :span="24" >
           <el-form-item style="width:97%" class="required text" label="故障描述" prop="ferrormemo">
          <el-input v-model="dataForm.ferrormemo" />
        </el-form-item>
         </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="紧急程度" prop="ferrorlevel">
          <el-select v-model="dataForm.ferrorlevel" clearable filterable class="filter-item" placeholder="请选择紧急程度">
          <el-option
            v-for="item in getListferrorlevel"
            :key="item.value"
            :label="item.label"
            :value="item.value"/>
        </el-select>
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item v-if="this.$store.state.user.fsiteLevel==3" label="维修人员" prop="frepairuser">
          <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select style="display: inline-block" clearable filterable v-model="dataForm.frepairuser" class="filter-item" placeholder="请选择维修人员">
                <el-option
                v-for="item in getListuser"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
                <i class="el-icon-search selectI" @click="searchDialoguse('addre')"/>
              </div>
        </el-form-item>
         <el-form-item v-else label="维修人员" prop="frepairuser">
          <div style="display:flex;justify-content:flex-start;align-items:center">
                <el-select style="display: inline-block" clearable filterable v-model="dataForm.frepairuser" class="filter-item" placeholder="请选择维修人员">
                <el-option
                v-for="item in getListuserAreaAdd"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
                <i class="el-icon-search selectI" @click="searchDialoguse('addre')"/>
              </div>
        </el-form-item>
          </el-col>
            <el-col :span="6">
           <el-form-item label="维修得分" prop="fbjnum">
          <el-input onkeyup="this.value=this.value.replace(/[^\d]/g,'');" v-model.number="dataForm.fbjnum" />
        </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="接单日期" prop="frecdate">
          <el-date-picker v-model="dataForm.frecdate" type="date" />
        </el-form-item>
         </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="出发日期" prop="fcfdate">
          <el-date-picker v-model="dataForm.fcfdate" type="date" />
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="达到日期" prop="fdddate">
          <el-date-picker v-model="dataForm.fdddate" type="date" />
        </el-form-item>
          </el-col>
         <el-col :span="6">
           <el-form-item label="完成日期" prop="fwcdate">
          <el-date-picker v-model="dataForm.fwcdate" type="date" />
        </el-form-item>
         </el-col>
             <el-col :span="6">
            <el-form-item label="离开日期" prop="flkdate">
          <el-date-picker v-model="dataForm.flkdate" type="date" />
        </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="24">
            <el-form-item class="text" style="width:97%" label="维修评价" prop="fbjnote">
          <el-input v-model="dataForm.fbjnote" />
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form
       v-else
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-position="left"
        label-width="90px"
      >
       <el-row>
          <el-col :span="6">
        <el-form-item class="required" label="报修单号" prop="fbillno">
          <el-input :disabled='true' v-model="dataForm.fbillno" />
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="required" label="报修日期" prop="freportdate">
          <el-date-picker :disabled='true' v-model="dataForm.freportdate" type="date" />
        </el-form-item>
          </el-col>
         <el-col :span="6">
           <el-form-item label="处理状态" prop="fbillstate">
              <el-select
              :disabled='true'
              v-model="dataForm.fbillstate"
              class="filter-item"
              clearable
              placeholder="请选择处理状态"
            >
              <el-option
                v-for="item in fbillstateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
        </el-form-item>
         </el-col>
            <el-col :span="6">
            <el-form-item class="required" label="报修人员" prop="freportuser">
           <el-select disabled clearable filterable v-model="dataForm.freportuser" class="filter-item" placeholder="请选择报修人员">
                <el-option
                v-for="item in getListuserAreaAdd"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
        </el-form-item>
         </el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
            <el-form-item class="required" label="固定资产码" prop="fequipmentbarcode">
          <el-input :disabled='true' v-model="dataForm.fequipmentbarcode" />
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备名称" prop="fequipmenttag">
          <el-input :disabled='true' v-model="dataForm.fequipmenttag" />
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item class="required" label="客户名称" prop="fsiteNo">
          <el-select :disabled="true" v-model="dataForm.fsiteNo" clearable filterable class="filter-item" placeholder="请选择客户名称">
                <el-option
                  v-for="item in getListfsiteNo"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"/>
            </el-select>
        </el-form-item>
          </el-col>
          <el-col :span="6">
             <el-form-item class="required" label="存放地点" prop="fpointNo">
           <el-select disabled clearable filterable v-model="dataForm.fpointNo" class="filter-item" placeholder="请选择存放地点">
                <el-option
                v-for="item in getListfpointNoAreaAdd"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
        </el-form-item>
          </el-col>
        </el-row>

        <el-row>
         <el-col :span="24">
           <el-form-item class="required text" style="width:97%" label="故障描述" prop="ferrormemo">
          <el-input :disabled='true' v-model="dataForm.ferrormemo" />
        </el-form-item>
         </el-col>
        </el-row>

      <el-row>
          <el-col :span="6">
            <el-form-item label="紧急程度" prop="ferrorlevel">
          <el-select disabled v-model="dataForm.ferrorlevel" clearable filterable class="filter-item" placeholder="请选择紧急程度">
          <el-option
            v-for="item in getListferrorlevel"
            :key="item.value"
            :label="item.label"
            :value="Number(item.value)"/>
        </el-select>
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="维修人员" prop="frepairuser">
          <el-select disabled clearable filterable v-model="dataForm.frepairuser" class="filter-item" placeholder="请选择维修人员">
                <el-option
                v-for="item in getListuserAreaAdd"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
              </el-select>
        </el-form-item>
          </el-col>
             <el-col :span="6">
           <el-form-item label="维修得分" prop="fbjnum">
          <el-input v-model.number="dataForm.fbjnum" />
        </el-form-item>
         </el-col>
         <el-col :span="6">
           <el-form-item label="接单日期" prop="frecdate">
          <el-date-picker :disabled='true' v-model="dataForm.frecdate" type="date" />
        </el-form-item>
         </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="出发日期" prop="fcfdate">
          <el-date-picker v-model="dataForm.fcfdate" type="date" />
        </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="达到日期" prop="fdddate">
          <el-date-picker v-model="dataForm.fdddate" type="date" />
        </el-form-item>
          </el-col>
         <el-col :span="6">
           <el-form-item label="完成日期" prop="fwcdate">
          <el-date-picker v-model="dataForm.fwcdate" type="date" />
        </el-form-item>
         </el-col>
             <el-col :span="6">
            <el-form-item label="离开日期" prop="flkdate">
          <el-date-picker v-model="dataForm.flkdate" type="date" />
        </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item style="width:97%" class="text" label="维修评价" prop="fbjnote">
          <el-input v-model="dataForm.fbjnote" />
        </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div :style="{width:'100%',display:'flex',border: '2px solid #F2F2F2',height:panelHeight}">
        <div style="width:343px;" class="tableLeft">
             <div v-if="activeName === 'first'">
                <el-form
                  ref="dataForm1"
                  :rules="rules1"
                  :model="dataForm1"
                  status-icon
                  label-position="left"
                  label-width="auto"
                >
                  <el-form-item class="required" label="设备照片" prop="fimage">
                    <el-upload
                      :on-remove="handleRemove"
                      :on-success="handleAvatarSuccess"
                      :limit="1"
                      action="https://jsonplaceholder.typicode.com/posts/"
                      list-type="picture-card"
                    >
                      <img v-if="dataForm.fimage" :src="dataForm.fimage" class="avatar" style="width:60px;height:60px">
                      <i v-else class="el-icon-plus avatar-uploader-icon" style="font-size:9px"></i>
                    </el-upload>
                  </el-form-item>
                  <el-form-item label="备注" prop="fmemo">
                    <el-input v-model="dataForm1.fmemo" />
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align: center">
                  <el-button round size="medium" :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="cancle1">取消</el-button>
                  <el-button round :style="{ background: buttonColor.confirm, color: buttonColor.color }" @click="editData1">确定</el-button>
                </div>
             </div>
               <div v-if="activeName === 'second'">
                  <el-form
                  ref="dataForm2"
                  :rules="rules2"
                  :model="dataForm2"
                  status-icon
                  label-position="left"
                  label-width="auto"
                >
                  <el-form-item class="required" label="故障编号" prop="ferrorno">
                    <el-input v-model.number="dataForm2.ferrorno" />
                  </el-form-item>
                  <el-form-item label="备注" prop="fmemo">
                    <el-input v-model="dataForm2.fmemo" />
                  </el-form-item>
                </el-form>
                 <div slot="footer" class="dialog-footer" style="text-align: center">
                  <el-button round size="medium" :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="cancle2">取消</el-button>
                  <el-button round :style="{ background: buttonColor.confirm, color: buttonColor.color }" @click="editData2">确定</el-button>
                </div>
             </div>
               <div v-if="activeName === 'fourth'">
                  <el-form
                  ref="dataForm3"
                  :rules="rules3"
                  :model="dataForm3"
                  status-icon
                  label-position="left"
                  label-width="auto"
                >
                  <el-form-item label="解决说明" prop="fprocmemo">
                    <el-input v-model="dataForm3.fprocmemo" />
                  </el-form-item>
                </el-form>
                 <div slot="footer" class="dialog-footer" style="text-align: center">
                  <el-button round size="medium" :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="cancle3">取消</el-button>
                  <el-button round :style="{ background: buttonColor.confirm, color: buttonColor.color }" @click="editData3">确定</el-button>
                </div>
             </div>
              <div v-if="activeName === 'fiveth'">
                  <el-form
                  ref="dataForm4"
                  :rules="rules4"
                  :model="dataForm4"
                  status-icon
                  label-position="left"
                  label-width="auto"
                >
                  <el-form-item label="零件编号" prop="fpartno">
                    <el-input v-model="dataForm4.fpartno" />
                  </el-form-item>
                  <el-form-item label="序列号" prop="fpartmac">
                    <el-input v-model="dataForm4.fpartmac" />
                  </el-form-item>
                  <el-form-item label="采购价" prop="fbuyprice">
                    <el-input v-model="dataForm4.fbuyprice" />
                  </el-form-item>
                  <el-form-item label="数量" prop="fqty">
                    <el-input v-model.number="dataForm4.fqty" />
                  </el-form-item>
                  <el-form-item label="合计" prop="ftotamt">
                    <el-input v-model="dataForm4.ftotamt" />
                  </el-form-item>
                  <el-form-item label="备注" prop="fmemo">
                    <el-input v-model="dataForm4.fmemo" />
                  </el-form-item>
                </el-form>
                 <div slot="footer" class="dialog-footer" style="text-align: center">
                  <el-button round size="medium" :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="cancle4">取消</el-button>
                  <el-button round :style="{ background: buttonColor.confirm, color: buttonColor.color }" @click="editData4">确定</el-button>
                </div>
             </div>
        </div>
          <el-tabs style="width:calc(100% - 343px)" type="border-card" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane name="first" label="设备照片">
              <div class="app-container">
                <!-- 子表一查询结果 -->
                <el-table
                  v-loading="listLoading"
                  :data="dataForm.details"
                  stripe
                  element-loading-text="正在查询中。。。"
                  border
                  fit
                  highlight-current-row
                  :header-cell-style="tableColor"
                  :height="panelHeight"
                >
                  <el-table-column
                    :index="indexMethod"
                    width="60"
                    align="center"
                    label="序"
                    type="index"
                  />
                  <el-table-column align="center" label="照片" prop="fimage">
                    <template slot-scope="scope">
                      <img :src="scope.row.fimage" class="avatar" >
                    </template>
                  </el-table-column>
                  <el-table-column align="left" label="备注" prop="fmemo" />
                  <el-table-column
                    width="90"
                    align="center"
                    label="操作"
                    class-name="small-padding"
                  >
                    <template slot-scope="scope">
                    <div class="operationButton">
                      <div :style="{color:buttonColor.delete,cursor:'pointer'}" @click="handleDelete1(scope.row)">
                        <img src="../../../public/images/del.png" />
                        删除
                      </div>
                    </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane name="second" label="故障列表">
              <div class="app-container">

                <!-- 子表二查询结果 -->
                <el-table
                  v-loading="listLoading"
                  :data="dataForm.details2"
                  stripe
                  element-loading-text="正在查询中。。。"
                  border
                  fit
                  highlight-current-row
                  :header-cell-style="tableColor"
                  :height="panelHeight"
                >
                  <el-table-column
                    :index="indexMethod"
                    width="60"
                    align="center"
                    label="序"
                    type="index"
                  />
                  <el-table-column align="left" label="故障编号" prop="ferrorno" />
                  <el-table-column align="left" label="备注" prop="fmemo" />
                  <el-table-column
                    width="90"
                    align="center"
                    label="操作"
                    class-name="small-padding"
                  >
                    <template slot-scope="scope">
                       <div class="operationButton">
                      <div :style="{color:buttonColor.delete,cursor:'pointer'}" @click="handleDeleteTwo(scope.row)">
                        <img src="../../../public/images/del.png" />
                        删除
                      </div>
                    </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane name="fourth" label="解决步骤">
              <div class="app-container">

                <!-- 子表三查询结果 -->
                <el-table
                  v-loading="listLoading"
                  :data="dataForm.details3"
                  stripe
                  element-loading-text="正在查询中。。。"
                  border
                  fit
                  highlight-current-row
                  :header-cell-style="tableColor"
                  :height="panelHeight"
                >
                  <el-table-column
                    :index="indexMethod"
                    width="60"
                    align="center"
                    label="序"
                    type="index"
                  />
                  <el-table-column
                    align="left"
                    label="解决说明"
                    prop="fprocmemo"
                  />
                  <el-table-column
                    width="90"
                    align="center"
                    label="操作"
                    class-name="small-padding"
                  >
                    <template slot-scope="scope">
                       <div class="operationButton">
                      <div :style="{color:buttonColor.delete,cursor:'pointer'}" @click="handleDeleteThree(scope.row)">
                        <img src="../../../public/images/del.png" />
                        删除
                      </div>
                    </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
            <el-tab-pane name="fiveth" label="更换零件">
              <div class="app-container">
                <!-- 子表四查询结果 -->
                <el-table
                  v-loading="listLoading"
                  :data="dataForm.details4"
                  stripe
                  element-loading-text="正在查询中。。。"
                  border
                  fit
                  highlight-current-row
                  :header-cell-style="tableColor"
                  :height="panelHeight"
                >
                  <el-table-column
                    :index="indexMethod"
                    width="60"
                    align="center"
                    label="序"
                    type="index"
                  />
                  <el-table-column align="left" label="零件编号" prop="fpartno" />
                  <el-table-column align="left" label="序列号" prop="fpartmac" />
                  <el-table-column align="left" label="采购价" prop="fbuyprice" />
                  <el-table-column align="left" label="数量" prop="fqty" />
                  <el-table-column align="left" label="合计" prop="ftotamt" />
                  <el-table-column align="left" label="备注" prop="fmemo" />
                  <el-table-column
                    width="90"
                    align="center"
                    label="操作"
                    class-name="small-padding"
                  >
                    <template slot-scope="scope">
                        <div class="operationButton">
                      <div :style="{color:buttonColor.delete,cursor:'pointer'}" @click="handleDeleteFour(scope.row)">
                        <img src="../../../public/images/del.png" />
                        删除
                      </div>
                    </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button round :style="{background:buttonColor.cancel,color:buttonColor.colorone}" @click="cancel()">取消</el-button>
        <el-button
          round
          v-if="dialogStatus == 'create'"
         :style="{background:buttonColor.confirm,color:buttonColor.color}"
          @click="createData"
        >确定</el-button
        >
        <el-button round v-else :style="{background:buttonColor.confirm,color:buttonColor.color}" @click="updateData">确定</el-button>
      </div>
    </el-dialog>

    <codeDialog :searchVisiblecode.sync="searchVisiblecode" :fpointNo.sync="codeDialogfpointNo" :fsiteNo.sync="codeDialogFsiteNo" :tableColor="tableColor" @codeDialog="codeDialogValue" />
    <userDialog :searchVisibleuse.sync="searchVisibleuse"  :fsiteNo.sync="userDialogFsiteNo" :tableColor="tableColor" @userDialog="userDialogValue" />
    <labDialog :searchVisiblelab.sync="searchVisiblelab" :fsiteNo.sync="labDialogFsiteNo" :tableColor="tableColor" @labDialog="labDialogValue" />
  </div>
</template>

<style>
.button-margin {
  margin: 2px 0px;
}
.el-button + .el-button {
  margin-left: 1px;
}
.avatar {
  width: 60px;
  height: 60px;
  display: block;
}
</style>

<script>
import {
  listrepairHead,
  createrepairHead,
  updaterepairHead,
  deleterepairHead
} from '@/api/repairHead'
import Pagination from '@/components/Pagination'
import moment from 'moment'
import { tableColor,titleColor,buttonColor } from '@/filters/index'
import { getListArea, fsiteOptionsByLevel,getFbillno } from '@/api/area'
import UserDialog from '@/components/UserDialog'
import LabDialog from '@/components/LabDialog'
import CodeDialog from '@/components/CodeDialog'

const siteTypeMap = {
  2: "已接单",
  3: "维修中",
  4: "已完成",
  5: "已评价",
};

export default {
  name: 'STcTodeal',
  components: { Pagination, UserDialog, LabDialog, CodeDialog },
  filters: {
    siteTypeFilter(type) {
      return siteTypeMap[type];
    },
  },
  data() {
    return {
      panelHeight: 0,
      activeName: 'first',
      buttonColor,
      getListfpointNoAreaAdd:null,
      getListfpointNoArea:null,
      getListuserAreaAdd:null,
      getListuserArea:null,

      labFlag:null,
      searchVisiblelab: false,
      labDialogFsiteNo:null,

      searchVisibleuse: false,
      userDialogFsiteNo: null,
      userFlag:null,

      searchVisiblecode:false,
      codeDialogFsiteNo: null,
      codeDialogfpointNo: null,
      getListuser: [],
      getListferrorlevel: [],
      getListfpointNo: [],
      getListfsiteNo: [],
      searchListAll: [],
      list: null,
      total: 0,
      listLoading: true,
      alarmdate: null,
      listQuery: {
        page: 1,
        limit: 20,
        fsiteNo: undefined,
        freportuser: undefined,
        freportdate: undefined,
        ftakedateStart: undefined,
        ftakedateEnd: undefined,
        fpointNo: undefined,
        fequipmentbarcode: undefined,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        freporttype: undefined,
        ferrormemo: undefined,
        ferrorlevel: undefined,
        frepairuser: undefined,
        frecdate: undefined,
        fcfdate: undefined,
        fdddate: undefined,
        fwcdate: undefined,
        flkdate: undefined,
        fbjnum: undefined,
        fbjnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      dataForm: {
        fsiteNo: undefined,
        freportuser: undefined,
        freportdate: undefined,
        fpointNo: undefined,
        fequipmentbarcode: undefined,
        feuipmentid: undefined,
        fequipmenttag: undefined,
        freporttype: undefined,
        ferrormemo: undefined,
        ferrorlevel: undefined,
        frepairuser: undefined,
        frecdate: undefined,
        fcfdate: undefined,
        fdddate: undefined,
        fwcdate: undefined,
        flkdate: undefined,
        fbjnum: undefined,
        fbjnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        id: undefined,
        details: [],
        details2: [],
        details3: [],
        details4: [],
        details5: undefined
      },
      actionsTmp5: undefined,

      actionsTmp: [],
      dialogFormVisible1: false,
      dialogStatus1: '',
      dataForm1: {
        fimage: undefined,
        fmemo: undefined,
      },

      actionsTmp2: [],
      dialogFormVisible2: false,
      dialogStatus2: '',
      dataForm2: {
        ferrorno: undefined,
        fmemo: undefined,
      },

      actionsTmp3: [],
      dialogFormVisible3: false,
      dialogStatus3: '',
      dataForm3: {
        fprocmemo: undefined,
      },

      actionsTmp4: [],
      dialogFormVisible4: false,
      dialogStatus4: '',
      dataForm4: {
        fpartno: undefined,
        fpartmac: undefined,
        fbuyprice: undefined,
        fqty: undefined,
        ftotamt: undefined,
        fmemo: undefined,
      },

      listTmp:[],

      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '创建'
      },
      tableColor: tableColor,
      titleColor: titleColor,
      rules: {
        fsiteNo: [{ required: true, message: '客户编号不能为空' }],
        freportuser: [{ required: true, message: '报修人员不能为空', trigger: 'blur' }],
        freportdate: [{ required: true, message: '报修日期不能为空' }],
        fpointNo: [{ required: true, message: '存放地点不能为空', trigger: 'blur' }],
        fequipmentbarcode: [{ required: true, message: '固定资产码不能为空', trigger: 'blur' }],
        freporttype: [
          {
            type: 'number',
            message: '维护合约必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        ferrormemo: [{ required: true, message: '故障描述不能为空' }],
        ferrorlevel: [
          {
            type: 'number',
            message: '紧急程度必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        frepairuser: [],
        frecdate: [],
        fcfdate: [],
        fdddate: [],
        fwcdate: [],
        flkdate: [],
        fbjnum:[],
        fbjnote: [],
        fupddate: [],
        foperator: [],
        fcheckdate: [],
        fcheckuser: [],
        fbillstate: [
          {
            type: 'number',
            message: '单据状态必须为数字值',
            transform: (value) => Number(value)
          }
        ]
      },
      rules1: {
        fline: [
          { required: true, message: '行号不能为空' },
          { type: 'number', message: '行号必须为数字值',transform: (value) => Number(value) }
        ],
        fimage: [{ required: true, message: '照片不能为空' }],
        fmemo: []
      },
      rules2: {
        fline: [
          { required: true, message: '行号不能为空' },
          { type: 'number', message: '行号必须为数字值',transform: (value) => Number(value) }
        ],
        ferrorno: [
          { required: true, message: '故障编号不能为空' },
          { type: 'number', message: '故障编号必须为数字值',transform: (value) => Number(value) }
        ],
        fmemo: []
      },
      rules3: {
        fline: [
          { required: true, message: '行号不能为空' },
          { type: 'number', message: '行号必须为数字值',transform: (value) => Number(value) }
        ],
        fprocmemo: []
      },
      rules4: {
        fline: [
          { required: true, message: '行号不能为空' },
          { type: 'number', message: '行号必须为数字值',transform: (value) => Number(value) }
        ],
        fpartno: [],
        fpartmac: [],
        fbuyprice: [],
        fqty: [
          {
            type: 'number',
            message: '数量必须为数字值',
            transform: (value) => Number(value)
          }
        ],
        ftotamt: [],
        fmemo: []
      },
      fbillstateOptions: [
        { value: 2, label: '已接单' },
        { value: 3, label: '维修中' },
        { value: 4, label: '已完成' },
        { value: 5, label: '已评价' }
      ]
    }
  },
  created() {
    this.panelHeight = document.documentElement.clientHeight-478
    this.alarmdate = [this.parserDate(moment(new Date().setDate(1)).format('YYYY-MM-DD')), new Date()]
    this.getList()
    fsiteOptionsByLevel(3)
      .then(response => {
        this.getListfsiteNo = response.data.data.list
      })
      .catch(() => {
        this.getListfsiteNo = []
      })

      if(this.$store.state.user.fsiteLevel==3){
        this.listQuery.fsiteNo = this.$store.state.user.fsiteNo;
        // 地点
        getListArea({ flag: 10,arg1:this.$store.state.user.fsiteNo })
        .then(response => {
          this.getListfpointNo = response.data.data.list
        })
        .catch(() => {
          this.getListfpointNo = []
        })
        // 人员弹出框
        getListArea({flag:13,arg1:this.$store.state.user.fsiteNo})
        .then(response => {
          this.getListuser = response.data.data.list
        })
        .catch(() => {
          this.getListuser = []
        })
      }else{
          // 地点
          getListArea({ flag: 10 })
          .then(response => {
            this.getListfpointNo = response.data.data.list
          })
          .catch(() => {
            this.getListfpointNo = []
          })
          // 人员弹出框
          getListArea({flag:13})
          .then(response => {
            this.getListuser = response.data.data.list
          })
          .catch(() => {
            this.getListuser = []
          })
      }

      // 紧急程度
      getListArea({ flag: 20 })
      .then(response => {
        this.getListferrorlevel = response.data.data.list
      })
      .catch(() => {
        this.getListferrorlevel = []
      })

  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.dataForm1.fimage = URL.createObjectURL(file.raw)
    },
    handleRemove() {},
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },

    // 切换tab子标签
      handleClick(tab, event) {
        console.log('tab.name',tab.name);
        this.activeName = tab.name
        // if(tab.name === 'second'){
        //   this.handleUpdate2()
        // }else if(tab.name === 'fourth'){
        //   this.handleUpdate3()
        // }else if(tab.name === 'first'){
        //   this.handleUpdate1()
        // }
    },

    // 地点改变
    changeFpointNo:function() {
      this.dataForm.fequipmentbarcode = null
      this.dataForm.fequipmenttag = null
      this.dataForm.feuipmentid = null
    },

     // 紧急程度
    formatferrorlevel: function(row, column) {
      if (this.getListferrorlevel) {
        for (let i = 0; i < this.getListferrorlevel.length; i++) {
          if (row.ferrorlevel == this.getListferrorlevel[i].value) {
            return this.getListferrorlevel[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },
     // 存放地点
    formatfpointNo: function(row, column) {
      if (this.getListfpointNo) {
        for (let i = 0; i < this.getListfpointNo.length; i++) {
          if (row.fpointNo === this.getListfpointNo[i].value) {
            return this.getListfpointNo[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    // 维修人员
    formatfrepairuser: function(row, column) {
      if(this.getListuser){
        for (let i = 0; i < this.getListuser.length; i++) {
        if (row.frepairuser == this.getListuser[i].value) {
          return this.getListuser[i].label
        }
      }
      return ''
      }else{
      return ''
      }
    },
     // 报修人员
    formatfreportuser: function(row, column) {
      if(this.getListuser){
        for (let i = 0; i < this.getListuser.length; i++) {
        if (row.freportuser == this.getListuser[i].value) {
          return this.getListuser[i].label
        }
      }
      return ''
      }else{
      return ''
      }
    },

    formatfsiteNo: function(row, column) {
      if (this.getListfsiteNo) {
        for (let i = 0; i < this.getListfsiteNo.length; i++) {
          if (row.fsiteNo === this.getListfsiteNo[i].value) {
            return this.getListfsiteNo[i].label
          }
        }
        return ''
      } else {
        return ''
      }
    },

    changeFsiteNo(data){
      this.listQuery.fpointNo = ''
      this.listQuery.freportuser = ''
      this.listQuery.frepairuser = ''
      this.getListfpointNoArea = []
      this.getListuserArea = []
      if(data){
        // 存放地点
          getListArea({ flag: 10,arg1:data })
          .then(response => {
            this.getListfpointNoArea = response.data.data.list
          })
          .catch(() => {
            this.getListfpointNoArea = []
          })

          // 人员弹出框
        getListArea({flag:13,arg1:data})
        .then(response => {
          this.getListuserArea = response.data.data.list
        })
        .catch(() => {
          this.getListuserArea = []
        })
      }
    },

    changeFsiteNoAdd(data){
      this.dataForm.fpointNo = ''
      this.dataForm.freportuser = ''
      this.dataForm.frepairuser = ''
      this.getListfpointNoAreaAdd = []
      this.getListuserAreaAdd = []
      this.dataForm.fequipmentbarcode = null
      this.dataForm.fequipmenttag = null
      this.dataForm.feuipmentid = null
      if(data){
        // 存放地点
          getListArea({ flag: 10,arg1:data })
          .then(response => {
            this.getListfpointNoAreaAdd = response.data.data.list
          })
          .catch(() => {
            this.getListfpointNoAreaAdd = []
          })

           // 人员弹出框
        getListArea({flag:13,arg1:data})
        .then(response => {
          this.getListuserAreaAdd = response.data.data.list
        })
        .catch(() => {
          this.getListuserAreaAdd = []
        })
      }
    },

      // 搜索人员弹出框
    searchDialoguse(value) {
      this.userFlag = value
      if(value==='add'){
        this.userDialogFsiteNo = this.dataForm.fsiteNo
      }else if(value==='addre'){
        this.userDialogFsiteNo = this.dataForm.fsiteNo
      }else if(value==='searchre'){
        this.userDialogFsiteNo = this.listQuery.fsiteNo
      }else{
       this.userDialogFsiteNo = this.listQuery.fsiteNo
      }
      this.searchVisibleuse = true
    },

    // 人员弹出框返回值
    userDialogValue(value){
      if(this.userFlag==='add'){
      this.dataForm.freportuser = value.user.id.toString()
      }else if(this.userFlag==='addre'){
      this.dataForm.frepairuser = value.user.id.toString()
      }else if(this.userFlag==='searchre'){
        this.listQuery.frepairuser = value.user.id.toString()
      }else{
        this.listQuery.freportuser = value.user.id.toString()
      }
    },

     // 搜索地点弹出框
    searchDialoglab(value) {
      this.labFlag = value
       if(value === 'add'){
        this.labDialogFsiteNo = this.dataForm.fsiteNo
      }else{
        this.labDialogFsiteNo = this.listQuery.fsiteNo
      }
      this.searchVisiblelab = true
    },

    // 地点弹出框返回值
    labDialogValue(value){
      if(this.labFlag==='add'){
        this.dataForm.fpointNo = value.lab.fpointNo
      this.dataForm.fequipmentbarcode = null
      this.dataForm.fequipmenttag = null
      this.dataForm.feuipmentid = null
      }else{
        this.listQuery.fpointNo = value.lab.fpointNo
      }
    },

      // 固定资产码弹出框
    searchDialogcode(value) {
      this.codeDialogFsiteNo = this.dataForm.fsiteNo
      this.codeDialogfpointNo = this.dataForm.fpointNo
      this.searchVisiblecode = true
    },

    // 固定资产码弹出框返回值
    codeDialogValue(value){
      this.dataForm.fequipmentbarcode = value.info.fequipmentbarcode
      this.dataForm.feuipmentid = value.info.feuipmentid
      this.dataForm.fequipmenttag = value.info.fequipmenttag
    },

    datetimeFormat(row, column) {
      const date = row[column.property]
      if (date === undefined || date === null) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    formatDate: function(date) {
      if(typeof(date)==='object'){
         var ym
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      if (m < 10) {
        m = '0' + m
      }
      if (d < 10) {
        d = '0' + d
      }
      ym = '' + y + m + d
      return ym
      }else{
        return date
      }

    },
    getList() {
      this.listQuery.ftakedateStart = this.alarmdate == null ? null : this.formatDate(this.alarmdate[0])
      this.listQuery.ftakedateEnd = this.alarmdate == null ? null : this.formatDate(this.alarmdate[1])
      this.listLoading = true
      if(this.listQuery.fbillno == ''){
        this.listQuery.fbillno = null
      }
      listrepairHead(this.listQuery)
        .then((response) => {
          const temp = []
          let i = 0
          response.data.data.list.filter((item) => {
            if (
              item.fbillstate === 2 ||
              item.fbillstate === 3 ||
              item.fbillstate === 4 ||
              item.fbillstate === 5
            ) {
              temp.push(item)
              i++
            }
          })
          this.list = temp
          this.total = i
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resetForm() {
      this.dataForm = {
        fsiteNo: undefined,
        freportuser: undefined,
        freportdate: undefined,
        fpointNo: undefined,
        fequipmentbarcode: undefined,
        feuipmentid: undefined,
        freporttype: undefined,
        ferrormemo: undefined,
        ferrorlevel: undefined,
        frepairuser: undefined,
        frecdate: undefined,
        fcfdate: undefined,
        fdddate: undefined,
        fwcdate: undefined,
        flkdate: undefined,
        fbjnum: undefined,
        fbjnote: undefined,
        fupddate: undefined,
        foperator: undefined,
        fcheckdate: undefined,
        fcheckuser: undefined,
        fbillstate: undefined,
        id: undefined,
        details: [],
        details2: [],
        details3: [],
        details4: [],
        details5: undefined
      }
    },
    resetForm1(){
       this.dataForm1 = {
          fimage: undefined,
          fmemo: undefined,
       }
    },
    resetForm2(){
       this.dataForm2 = {
          ferrorno: undefined,
          fmemo: undefined,
       }
    },
    resetForm3(){
       this.dataForm3 = {
          fprocmemo: undefined,
       }
    },
    resetForm4(){
       this.dataForm4 = {
          fpartno: undefined,
          fpartmac: undefined,
          fbuyprice: undefined,
          fqty: undefined,
          ftotamt: undefined,
          fmemo: undefined,
       }
    },
    handleCreate() {
      this.resetForm()
       getFbillno({ flag: 2004 })
        .then((response) => {
          if (response) {
            this.dataForm.fbillno = response.data.data
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          }
        })
        .catch(() => {
          this.dataForm.fbillno = ''
        })
        if(this.$store.state.user.fsiteLevel==3){
           this.dataForm.freportuser = this.$store.state.user.id.toString()
           this.dataForm.fsiteNo = this.$store.state.user.fsiteNo;
        }else{
          this.getListfpointNoAreaAdd = []
          this.getListuserAreaAdd = []
        }
         this.dataForm.frecdate = new Date()
         this.dataForm.freportdate = new Date()
        this.dataForm.ferrorlevel = this.getListferrorlevel[0].value
        this.dataForm.fbillstate = this.fbillstateOptions[0].value
        this.dialogStatus = 'create'

    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator=this.$store.state.user.id
          this.dataForm.fupddate=new Date()
          createrepairHead(this.dataForm)
            .then((response) => {
              this.list.unshift(response.data.data)
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '添加设备维修主表成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    handleUpdate(row) {
      this.actionsTmp = []
      row.details.forEach((v) => {
        this.actionsTmp.push(v)
      })

      this.actionsTmp2 = []
      row.details2.forEach((v) => {
        this.actionsTmp2.push(v)
      })

      this.actionsTmp3 = []
      row.details3.forEach((v) => {
        this.actionsTmp3.push(v)
      })

      this.actionsTmp4 = []
      row.details4.forEach((v) => {
        this.actionsTmp4.push(v)
      })

      this.actionsTmp5 = row.details5

      this.listTmp=row

      this.dataForm = Object.assign({}, row)
       if(this.$store.state.user.fsiteLevel ===3 ){
         // 存放地点
          getListArea({ flag: 10,arg1:row.fsiteNo })
          .then(response => {
            this.getListfpointNoAreaAdd = response.data.data.list
          })
          .catch(() => {
            this.getListfpointNoAreaAdd = []
          })

           // 人员弹出框
          getListArea({flag:13,arg1:row.fsiteNo})
          .then(response => {
            this.getListuserAreaAdd = response.data.data.list
          })
          .catch(() => {
            this.getListuserAreaAdd = []
          })
      }
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.dataForm.foperator=this.$store.state.user.id
          this.dataForm.fupddate=new Date()
          updaterepairHead(this.dataForm, this.$route.query.id)
            .then(() => {
              for (const v of this.list) {
                if (v.fbillno === this.dataForm.fbillno) {
                  const index = this.list.indexOf(v)
                  this.list.splice(index, 1, this.dataForm)
                  break
                }
              }
              this.dialogFormVisible = false
              this.$notify.success({
                title: '成功',
                message: '更新设备维修主表成功'
              })
            })
            .catch((response) => {
              this.$notify.error({
                title: '失败',
                message: response
              })
            })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('是否要删除设备维修主表', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleterepairHead(row)
          .then((response) => {
            this.$notify.success({
              title: '成功',
              message: '删除设备维修主表成功'
            })
            const index = this.list.indexOf(row)
            this.list.splice(index, 1)
          })
          .catch((response) => {
            this.$notify.error({
              title: '失败',
              message: response
            })
          })
      })
    },
    indexMethod(index) {
      index = index + 1
      return index
    },


    // 子表一
     handleUpdate1(){
      // 清除验证
       this.handleRemove()
      this.$nextTick(() => {
        this.$refs['dataForm1'].clearValidate()
      })
    },

     // 子表一添加数据
    editData1() {
      this.$refs["dataForm1"].validate((valid) => {
        if (valid) {
            // 子表第一次添加
            this.dataForm.details.push(this.dataForm1);
          }
            this.resetForm1()
            // 清除验证
            this.$nextTick(() => {
              this.$refs["dataForm1"].clearValidate();
            });
      });
    },

    // 子表一取消
     cancle1(){
         this.resetForm1()
          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm1"].clearValidate();
          });
    },

    // 子表一删除
    handleDelete1(row) {
      const index = this.dataForm.details.indexOf(row);
      this.dataForm.details.splice(index, 1);
      this.resetForm1()
    },


    // 子表二
     handleUpdate2(){
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm2'].clearValidate()
      })
    },

     // 子表二添加数据
    editData2() {
      this.$refs["dataForm2"].validate((valid) => {
        if (valid) {
            // 子表第一次添加
            this.dataForm.details2.push(this.dataForm2);
          }
            this.resetForm2()
            // 清除验证
            this.$nextTick(() => {
              this.$refs["dataForm2"].clearValidate();
            });
      });
    },

    // 子表二取消
     cancle2(){
         this.resetForm2()
          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm2"].clearValidate();
          });
    },

    // 子表二删除
    handleDelete2(row) {
      const index = this.dataForm.details2.indexOf(row);
      this.dataForm.details2.splice(index, 1);
      this.resetForm2()
    },

     // 子表三
     handleUpdate3(){
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm3'].clearValidate()
      })
    },

     // 子表三添加数据
    editData3() {
      this.$refs["dataForm3"].validate((valid) => {
        if (valid) {
            // 子表第一次添加
            this.dataForm.details3.push(this.dataForm3);
          }
            this.resetForm3()
            // 清除验证
            this.$nextTick(() => {
              this.$refs["dataForm3"].clearValidate();
            });
      });
    },

    // 子表三取消
     cancle3(){
         this.resetForm3()
          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm3"].clearValidate();
          });
    },

    // 子表三删除
    handleDelete3(row) {
      const index = this.dataForm.details3.indexOf(row);
      this.dataForm.details3.splice(index, 1);
      this.resetForm3()
    },

    // 子表四
     handleUpdate4(){
      // 清除验证
      this.$nextTick(() => {
        this.$refs['dataForm4'].clearValidate()
      })
    },

     // 子表四添加数据
    editData4() {
      this.$refs["dataForm4"].validate((valid) => {
        if (valid) {
            // 子表第一次添加
            this.dataForm.details4.push(this.dataForm4);
          }
            this.resetForm4()
            // 清除验证
            this.$nextTick(() => {
              this.$refs["dataForm4"].clearValidate();
            });
      });
    },

    // 子表四取消
     cancle4(){
         this.resetForm4()
          // 清除验证
          this.$nextTick(() => {
            this.$refs["dataForm4"].clearValidate();
          });
    },

    // 子表四删除
    handleDelete4(row) {
      const index = this.dataForm.details4.indexOf(row);
      this.dataForm.details4.splice(index, 1);
      this.resetForm4()
    },

    cancel() {
      this.dialogFormVisible = false
      this.list.forEach((v) => {
        if (v.fbillno === this.dataForm.fbillno) {
          this.dataForm = this.listTmp
          this.dataForm.details = this.actionsTmp
          this.dataForm.details2 = this.actionsTmp2
          this.dataForm.details3 = this.actionsTmp3
          this.dataForm.details4 = this.actionsTmp4
          this.dataForm.details5 = this.actionsTmp5
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          return
        }
      })
    },
    // 弹窗点击关闭前的回调
    handleClose(){
      this.dialogFormVisible = false
      this.list.forEach((v) => {
        if (v.fbillno === this.dataForm.fbillno) {
          this.dataForm = this.listTmp
          this.dataForm.details = this.actionsTmp
          this.dataForm.details2 = this.actionsTmp2
          this.dataForm.details3 = this.actionsTmp3
          this.dataForm.details4 = this.actionsTmp4
          this.dataForm.details5 = this.actionsTmp5
          const index = this.list.indexOf(v)
          this.list.splice(index, 1, this.dataForm)
          return
        }
      })
    },
  }
}
</script>
